<template>
  <div class="login-container">
    <div class="background-wrapper">
      <div class="gradient-bg"></div>
      <div class="decorative-shapes">
        <div class="shape circle"></div>
        <div class="shape triangle"></div>
        <div class="shape wave"></div>
      </div>
    </div>

    <el-card class="login-box">
      <div class="branding">
        <div class="logo">
          <svg-icon icon-class="cloud" class="cloud-icon" />
        </div>
        <h2>欢迎回来</h2>
        <p class="subtitle">管理员登录</p>
      </div>

      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item prop="username" label="用户名：" label-width="80px">
  <el-input
    v-model="form.username"
    placeholder="5-16位非空字符"
    class="custom-input"
  >
    <template #prefix>
      <svg-icon icon-class="user" class="input-icon" />
    </template>
  </el-input>
</el-form-item>

<el-form-item prop="password" label="密码：" label-width="80px">
  <el-input
    v-model="form.password"
    type="password"
    placeholder="5-16位非空字符"
    class="custom-input"
    show-password
  >
    <template #prefix>
      <svg-icon icon-class="lock" class="input-icon" />
    </template>
  </el-input>
</el-form-item>

        <el-button
          type="primary"
          class="login-btn"
          @click="handleLogin"
          :loading="loading"
        >
          <span v-if="!loading">立即登录</span>
          <template #loading>
            <span class="loading-text">登录中...</span>
          </template>
        </el-button>

        <div class="additional-actions">
          <router-link to="/register" class="register-link">
            <svg-icon icon-class="edit" class="link-icon" />
            注册管理员账号
          </router-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {ref, toRaw} from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { login } from '@/api/admin'
import { useTokenStore } from '@/stores/token'

const form = ref({
  username: '',
  password: '',
  usertype: 2
})

const formRef = ref()
const loading = ref(false)
const router = useRouter()
const tokenStore = useTokenStore()

const handleLogin = async () => {
  try {
    const valid = await formRef.value.validate()
    if (valid) {
      loading.value = true
      const requestData = {
        username: form.value.username,
        password: form.value.password,
        usertype: form.value.usertype
      }
      const res = await login(requestData)
      if (res.success) {
        tokenStore.setToken(res.data.jwtToken)
          localStorage.setItem('token', res.data.jwtToken)
        ElMessage.success('登录成功')
        router.push('/production')
      } else {
        ElMessage.error(res.message || '登录失败')
      }
    }
  } catch (error) {
    console.error('登录错误:', error)
    ElMessage.error('登录失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.background-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.gradient-bg {
  position: absolute;
  width: 150%;
  height: 150%;
  background: linear-gradient(45deg, #4f46e5 0%, #818cf8 100%);
  transform: rotate(-15deg);
  opacity: 0.1;
}

.decorative-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  opacity: 0.1;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #4f46e5;
  top: 20%;
  left: 10%;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 150px solid #818cf8;
  top: 50%;
  right: 10%;
}

.wave {
  width: 300px;
  height: 100px;
  background: #6366f1;
  clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%);
  bottom: 10%;
  left: 30%;
}

.login-box {
  width: 420px;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.login-box:hover {
  transform: translateY(-5px);
}

.branding {
  text-align: center;
  margin-bottom: 40px;
}

.logo {
  width: 80px;
  height: 80px;
  background: #4f46e5;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.1);
}

.cloud-icon {
  font-size: 40px;
  color: white;
}

h2 {
  font-size: 24px;
  color: #1f2937;
  margin-bottom: 8px;
}

.subtitle {
  color: #6b7280;
  font-size: 14px;
}

.custom-input {
  margin-bottom: 20px;
}

.input-icon {
  font-size: 18px;
  color: #9ca3af;
  margin-right: 8px;
}

.login-btn {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  background: linear-gradient(45deg, #4f46e5, #6366f1);
  border: none;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.loading-text {
  letter-spacing: 1px;
}

.additional-actions {
  margin-top: 24px;
  text-align: center;
}

.register-link {
  color: #6b7280;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
}

.register-link:hover {
  color: #4f46e5;
}

.link-icon {
  font-size: 14px;
  margin-right: 6px;
}
</style>
